<template>
  <canvas class="data-v-loading4" width="170" height="64"></canvas>
</template>

<script>
import Circle from "./Circle";
import Color from "color-js";
export default {
  name: "data-v-loading4",
  props: ["percentage", "color"],
  computed: {
    percent() {
      return Math.round(this.percentage * 100) + "%";
    }
  },

  data() {
    return {
      dot: ""
    };
  },

  created() {
    this.timer = setInterval(() => {
      this.dot += ".";
      if (this.dot.length > 3) {
        this.dot = "";
      }
    }, 500);
  },

  mounted() {
    const CIRCLE_RADIUS = 30;
    const LINE_WIDTH = 4;
    const canvas = this.$el;
    const ctx = canvas.getContext("2d");
    let cl = Color(this.color).darkenByAmount(0.15);

    // let centerX = canvas.width / 2;
    let centerY = canvas.height / 2;

    let gradnent = ctx.createLinearGradient(0, 0, 20, 15);
    gradnent.addColorStop(0, this.color);
    gradnent.addColorStop(1, "transparent");

    let circle = new Circle(CIRCLE_RADIUS, this.color);
    circle.x = CIRCLE_RADIUS + LINE_WIDTH;
    circle.y = centerY;
    circle.lineWidth = 4;

    let circles = [];
    let len = 30;
    while (len--) {
      let r = 24;
      let c = new Circle(r, cl);
      c.x = circle.x;
      c.y = circle.y;
      c.lineWidth = 4;
      c.startAngle = (len / 30) * 360;
      c.endAngle = c.startAngle + 5;
      circles.push(c);
    }

    const drawText = () => {
      ctx.fillStyle = this.color;
      ctx.font = "12px Arial Bold";
      ctx.textAlign = "center";
      ctx.fillText(this.percent, circle.x, circle.y + 4);
    };

    const drawCircle = () => {
      circle.draw(ctx);
      circles.forEach(c => {
        c.rotation += 0.3;
        if (c.rotation > 360) {
          c.rotation = 0;
        }
        c.draw(ctx);
      });
    };

    const drawOther = () => {
      /* 外框 */
      ctx.save();
      ctx.beginPath();
      ctx.strokeStyle = this.color;
      ctx.moveTo(60, 15);
      ctx.lineTo(150, 15);
      ctx.lineTo(canvas.width, centerY + 15);
      ctx.lineTo(60, centerY + 15);
      // ctx.closePath();
      ctx.stroke();
      ctx.restore();
      /* 内框 */
      ctx.save();
      ctx.beginPath();
      ctx.strokeStyle = this.color;
      ctx.moveTo(70, 20);
      ctx.lineTo(147, 20);
      ctx.lineTo(canvas.width - 10, centerY + 10);
      ctx.lineTo(70, centerY + 10);
      ctx.closePath();
      ctx.fill();
      ctx.restore();
      /* 文字 */
      ctx.save();
      ctx.beginPath();
      ctx.fillStyle = "#000";
      ctx.font = "12px Arial Bold";
      ctx.textAlign = "left";
      ctx.fillText("LOADING", 75, circle.y + 4);
      ctx.fillText("LOADING", 76, circle.y + 4);
      ctx.fillText(this.dot, canvas.width - 35, circle.y + 4);
      ctx.restore();
    };

    const drawFrame = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // draw text
      drawText();
      // draw circle
      drawCircle();
      // draw other
      drawOther();
      requestAnimationFrame(drawFrame);
    };
    drawFrame();
  },

  destroyed() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="less">
.data-v-loading4 {
  display: inline-block;
  position: relative;
  // width: 170px;
  // height: 64px;
  line-height: 64px;
  margin-left: 10px;
}
</style>
